<!-- 订单-申请退款 -->
<script setup>
import { ref, reactive } from 'vue'
// 数据
const data = reactive({
  value: ''
})
// 单选列表
const radiolist = [
  {
    name: '预约问题重新购买'
  },
  {
    name: '价格不划算'
  },
  {
    name: '不需要了'
  },
  {
    name: '商家要求改用其他方式/平台付款'
  },
  {
    name: '商家/教练无法提供服务'
  },
  {
    name: '更多原因 '
  }
]
</script>

<template>
  <view class="order-refund-page">
    <view class="content">
      <!-- 场地信息 -->
      <view class="info-box">
        <view class="pic">
          <u-image :src="`https://cdn.uviewui.com/uview/swiper/swiper1.png`" width="132rpx" height="152rpx"
            mode="aspectFill" />
        </view>
        <view class="info">
          <view class="name"> TouY运动室</view>
          <view class="time">09月04日（周四）11:30</view>
          <view class="address">
            <image src="/static/images/icons/icon_shop.png" style="width: 24rpx; height: 24rpx;" mode="widthFit" />
            <text class="up-line-1">明发新城中心A1栋 · 3006号（南京工业大学地铁）</text>
          </view>
        </view>
      </view>
      <!-- 订单退款详情 -->
      <view class="order-refund-detail-box">
        <view class="head">退款详情</view>
        <!-- 场地金额 -->
        <view class="order-detail-item">
          <view class="label">场地金额:</view>
          <view class="value">
            ￥ {{ `69` }}
          </view>
        </view>
        <!-- 场地金额 -->
        <view class="order-detail-item">
          <view class="label">教练金额:</view>
          <view class="value">
            ￥ {{ `100` }}
          </view>
        </view>
        <!-- 氧气补贴 -->
        <view class="order-detail-item">
          <view class="label">氧气补贴:</view>
          <view class="value" style="color: #FF0F00">
            -￥{{ `59.1` }}
          </view>
        </view>
        <!-- 线 -->
        <view class="line"></view>
        <!-- 实际退款 -->
        <view class="order-detail-item">
          <view class="label">实际退款</view>
          <view class="value refundAmount">
            ￥{{ `109.9` }}
          </view>
        </view>
      </view>
      <!-- 退款原因 -->
      <view class="refund-reason-box">
        <view class="head">退款原因</view>
        <up-radio-group v-model="data.value" iconPlacement="right" placement="column" inactiveColor="#D9D9D9"
          activeColor="#25D62E">
          <up-radio :customStyle="{ marginBottom: '32rpx' }" v-for="(item, index) in radiolist" :key="index"
            :label="item.name" :name="item.name">
          </up-radio>
        </up-radio-group>
      </view>
      <!-- 提示 -->
      <view class="tip-box">
        <up-icon name="info-circle" color="#838385" size="16"></up-icon>
        <text>退款申请一经提交后不可撤销，预计1-3个工作日内到账</text>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btns-box">
      <view class="btn">
        <text>申请退款</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.order-refund-page {
  padding-bottom: 216rpx;
  background-color: #F6F6F6;
  min-height: 100vh;

  // 内容
  & .content {
    padding: 20rpx 32rpx;

    // 场地信息
    & .info-box {
      display: flex;
      align-items: center;
      padding: 28rpx 32rpx;
      background: #FFFFFF;
      border-radius: 24rpx;

      & .pic {
        margin-right: 24rpx;
        border-radius: 12rpx;
        overflow: hidden;
      }

      & .info {
        margin-left: 16rpx;
        width: 460rpx;

        & .name {
          font-weight: 500;
          font-size: 32rpx;
          color: #303133;
        }

        & .time {
          margin-top: 24rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #303133;
        }

        & .address {
          margin-top: 10rpx;
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 20rpx;
          color: #838385;

          & text {
            margin-left: 2rpx;
          }
        }
      }
    }

    // 订单退款详情
    & .order-refund-detail-box {
      margin-top: 20rpx;
      padding: 28rpx 32rpx;
      background: #FFFFFF;
      border-radius: 24rpx;

      & .head {
        font-weight: 600;
        font-size: 32rpx;
        color: #303133;
      }

      & .line {
        margin-top: 24rpx;
        border: 2rpx solid;
        opacity: 0.5;
        border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
      }

      & .order-detail-item {
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .label {
          font-weight: 400;
          font-size: 28rpx;
          color: #838385;
        }

        & .value {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 28rpx;
          color: #303133;

          &.refundAmount {
            font-weight: 500;
            font-size: 40rpx;
            background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          &::v-deep .u-icon {
            margin-left: 10rpx;
            font-weight: 700rpx;
          }
        }
      }
    }

    // 退款原因
    & .refund-reason-box {
      margin-top: 20rpx;
      padding: 28rpx 32rpx;
      background: #FFFFFF;
      border-radius: 24rpx;

      & .head {
        margin-bottom: 32rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #303133;
      }
    }

    // 提示
    & .tip-box {
      margin-top: 20rpx;
      display: flex;
      align-items: center;

      & text {
        margin-left: 4rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #838385;
      }
    }
  }

  // 按钮
  & .btns-box {
    position: fixed;
    display: flex;
    // align-items: center;
    justify-content: center;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding: 0 36rpx;
    padding-top: 12rpx;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border: 1rpx solid #E9E9EB;

    & .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 88rpx;
      width: 620rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #303133;
      border-radius: 112rpx;

    }
  }
}
</style>